<template>
  <div class="app-container">
    <!-- 查询条件开始
        :gutter=“12” 表示每个el-col之间的间距
     -->
    <el-row :gutter="12" style="margin-bottom: 5px;">
      <el-col :span="24">
        <el-card>
          <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
            <el-form-item style="float: right;">
              <el-button type="primary" icon="el-icon-plus" size="small" @click="upWeek">上一周</el-button>
              <el-button type="success" icon="el-icon-s-operation" size="small" @click="currentWeek">当前周</el-button>
              <el-button type="primary" icon="el-icon-plus" size="small" @click="nextWeek">下一周</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <!-- 查询条件结束 -->

    <!-- 时间条开始 -->
    <el-row :gutter="12" style="margin-bottom: 5px;">
      <el-col :span="24">
        <el-card>
          <div style="text-align: center;">
            <span>{{schedulingData.startTimeThisWeek}}(周一)-{{schedulingData.endTimeThisWeek}}(周日)</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 时间条结束 -->

    <!-- 排班表格开始 -->
    <el-table v-loading="loading" :data="tableData" border :span-method="spanMethod">
      <el-table-column label="医生" prop="userId" align="center" :formatter="userFormatter" />
      <el-table-column label="科室" prop="deptId" align="center" :formatter="deptFormatter" />
      <el-table-column prop="subsectionType" label="时间/日期" align="center" :formatter="subsectionTypeFormatter" />
      <el-table-column prop="schedulingType[0]" :label="labelNames[0]" align="center" :formatter="schedulingTypeDay1Formatter" />
      <el-table-column prop="schedulingType[1]" :label="labelNames[1]" align="center" :formatter="schedulingTypeDay2Formatter" />
      <el-table-column prop="schedulingType[2]" :label="labelNames[2]" align="center" :formatter="schedulingTypeDay3Formatter" />
      <el-table-column prop="schedulingType[3]" :label="labelNames[3]" align="center" :formatter="schedulingTypeDay4Formatter" />
      <el-table-column prop="schedulingType[4]" :label="labelNames[4]" align="center" :formatter="schedulingTypeDay5Formatter" />
      <el-table-column prop="schedulingType[5]" :label="labelNames[5]" align="center" :formatter="schedulingTypeDay6Formatter" />
      <el-table-column prop="schedulingType[6]" :label="labelNames[6]" align="center" :formatter="schedulingTypeDay7Formatter" />
    </el-table>
    <!-- 排班表格结束 -->



  </div>
</template>

<script>
  import {
    selectAllDept
  } from '@/api/system/dept'
import {queryUsersNeedScheduling,queryMyScheduling} from '@/api/doctor/scheduling'
  export default {
      computed: {
        groupNum() { // 获取医生列表数组
          return new Set(this.tableData.map(o => o.userId))
        }
      },
    data() {
      return {
        // 加载遮罩层
        loading: false,
        // 查询参数
        queryParams: {
          deptId:undefined,
          userId:undefined,
          queryDate:undefined
        },
        // 科室列表
        deptOptions: [],
        // 用户列表
        userOptions: [],
        // 排班时间数据
        schedulingData: {
          startTimeThisWeek: '2021-01-11',
          endTimeThisWeek: '2021-01-17'
        },
        // 排班表的数据 应从后台查询
        tableData: [

        ],
        // 排班类型的标签值
        labelNames: [
          "","","","","","",""
        ],
        // 排班时间段列表 上午 下午 晚上
        subsectionTypeOptions: [],
        // 排班类型列表 急诊 门诊
        schedulingTypeOptions: [],
        // 弹出层的标题
        title:'',
        // 弹出层是否展示
        open:false,
        // 弹出层的表格数据
        editData:[]
      }
    },
    created() {
      // 查询全部科室列表
      selectAllDept().then(res => {
        this.deptOptions = res.data
      })
      // 查询全部需要排班的医生
      queryUsersNeedScheduling().then(res => {
        this.userOptions = res.data
      })
      // 查询排班时间段
      this.getDataByType('his_subsection_type').then(res => {
        this.subsectionTypeOptions = res.data
      })
      // 查询排班类型
      this.getDataByType('his_scheduling_type').then(res => {
        this.schedulingTypeOptions = res.data
      })
      // 查询排班数据 返回的值要填充 tableData、labelNames、schedulingData
      this.listScheduling()
    },
    methods: {
      // 查询排班数据
      listScheduling(){
        this.loading = true
        queryMyScheduling(this.queryParams).then(res=>{
          this.tableData = res.data.tableData
          this.labelNames = res.data.labelNames
          this.schedulingData = res.data.schedulingData
          this.loading = false
        })
      },
      // 查询条件搜索方法
      handleQuery() {
        this.listScheduling()
      },
      // 查询条件重置方法
      resetQuery() {
        this.resetForm('queryForm')
        this.listScheduling()
      },
      // 上一周
      upWeek() {
        this.queryParams.queryDate = this.schedulingData.startTimeThisWeek
        this.listScheduling()
      },
      // 当前周
      currentWeek() {
        this.queryParams.queryDate = undefined
        this.listScheduling()
      },
      // 下一周
      nextWeek() {
         this.queryParams.queryDate = this.schedulingData.endTimeThisWeek
        this.listScheduling()
      },
      // 翻译医生信息
      userFormatter(row) {
        let name = ""
        this.userOptions.filter(item => {
          if (row.userId === item.userId) {
            name = item.userName
          }
        })
        return name
      },
      // 翻译科室信息
      deptFormatter(row) {
        let name = ""
        this.deptOptions.filter(item => {
          if (row.deptId === item.deptId) {
            name = item.deptName
          }
        })
        return name
      },
      // 翻译排班时间段
      subsectionTypeFormatter(row) {
        return this.selectDictLabel(this.subsectionTypeOptions, row.subsectionType)
      },
      // 翻译周一的排班类型
      schedulingTypeDay1Formatter(row) {
        return this.selectDictLabel(this.schedulingTypeOptions, row.schedulingType[0])
      },
      // 翻译周二的排班类型
      schedulingTypeDay2Formatter(row) {
        return this.selectDictLabel(this.schedulingTypeOptions, row.schedulingType[1])
      },
      // 翻译周三的排班类型
      schedulingTypeDay3Formatter(row) {
        return this.selectDictLabel(this.schedulingTypeOptions, row.schedulingType[2])
      },
      // 翻译周四的排班类型
      schedulingTypeDay4Formatter(row) {
        return this.selectDictLabel(this.schedulingTypeOptions, row.schedulingType[3])
      },
      // 翻译周五的排班类型
      schedulingTypeDay5Formatter(row) {
        return this.selectDictLabel(this.schedulingTypeOptions, row.schedulingType[4])
      },
      // 翻译周六的排班类型
      schedulingTypeDay6Formatter(row) {
        return this.selectDictLabel(this.schedulingTypeOptions, row.schedulingType[5])
      },
      // 翻译周日的排班类型
      schedulingTypeDay7Formatter(row) {
        return this.selectDictLabel(this.schedulingTypeOptions, row.schedulingType[6])
      },
      // 合并重复的排班表格数据代码开始
      spanMethod(data) { // 对于表格数据进行分组合并操作，UI组件回调函数
        const {
          row,
          rowIndex,
          columnIndex
        } = data
        if (columnIndex < 2 || columnIndex > 9) { // 医生合并展示区
          const len = this.userGroup(row.userId)
          const lenName = this.userIdLen(row.userId)
          if (rowIndex === lenName) { // 某医生首位部门行
            return {
              rowspan: len,
              colspan: 1
            }
          } else {
            return { // 某医生非首位部门行
              rowspan: 0,
              colspan: 0
            }
          }
        } else { // 排班信息展示区
          return {
            rowspan: 1,
            colspan: 1
          }
        }
      },
      userGroup(name) { // 根据医生名称获取医生数量
        return this.tableData.filter(o => o.userId === name).length
      },
      userIdLen(name) { // 根据医生名称获取该医生第一个部门在全量部门中的偏移位置
        const tmp = Array.from(this.groupNum)
        const index = tmp.indexOf(name) // 某医生在全医生中的偏移位置
        let len = 0
        for (let i = 0; i < index; i++) {
          len += this.userGroup(tmp[i])
        }
        return len
      }
      // 合并重复的排班表格数据代码结束
    }
  }
</script>
